<template>
	<div>
		<div class="block top">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
			  <el-form-item label="雇主姓名" style="margin-right: 80px;">
			    <el-input v-model="formInline.user"></el-input>
			  </el-form-item>
			  <el-form-item label="从业者姓名" style="margin-right: 80px;">
			     <el-input v-model="formInline.user"></el-input>
			  </el-form-item>
			  <el-form-item label="门店名称" style="margin-right: 80px;">
			     <el-input v-model="formInline.user"></el-input>
			  </el-form-item>
			  <el-form-item label="点评时间" style="display: block;">
				  <el-date-picker
				    v-model="value1"
				    type="daterange"
				    range-separator="至"
				    start-placeholder="开始日期"
				    end-placeholder="结束日期">
				  </el-date-picker>
			  </el-form-item>
			<!--  <el-form-item class="query">
			    <el-button  type="primary" @click="onSubmit">查询</el-button>
			  </el-form-item> -->
			</el-form>
			 <el-button  class="query" type="primary" @click="onSubmit">查询</el-button>
		  </div>
		  <div class="block center">
			  <span class="anniu">从业者</span><span class="dian one"></span><span style="display: inline-block;
			  margin-left: 40px;font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 20px;
             color: #000000;">从业者姓名</span>
			   <el-button class="del"  type="danger" @click="onSubmit">删除</el-button>
			   <div class="text"><textarea>这边就是点评的文案内容 后台人员在此界面可查阅点评发现不友好的点评可手动进行删除</textarea></div>
			   <div class="botton_right">
				   <div style="position: absolute;top: 23px;"> <span class="anniu">雇主</span><span class="dian tow"></span><span style="display: inline-block;
			  margin-left: 40px;font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 20px;
             color: #000000;">雇主姓名</span></div>
			 <div style="font-size: 18px;
			 font-family: PingFang SC;
			 font-weight: 500;
			 position: absolute;
			 top: 60px;
			 line-height: 25px;
			 color: #7B7B7B;">2021-5-10 18:00</div>
			   </div>
		  </div>
		  <!--  -->
		  <div class="block center">
		  			  <span class="anniu">从业者</span><span class="dian one"></span><span style="display: inline-block;
		  			  margin-left: 40px;font-size: 14px;
		      font-family: PingFang SC;
		      font-weight: 500;
		      line-height: 20px;
		     color: #000000;">从业者姓名</span>
		  			   <el-button class="del"  type="danger" @click="onSubmit">删除</el-button>
		  			   <div class="text"><textarea>这边就是点评的文案内容 后台人员在此界面可查阅点评发现不友好的点评可手动进行删除</textarea></div>
		  			   <div class="botton_right">
		  				   <div style="position: absolute;top: 23px;"> <span class="anniu" style="background-color:  #FFA700;width: 62px;">线上门店</span><span class="dian tow"></span><span style="display: inline-block;
		  			  margin-left: 40px;font-size: 14px;
		      font-family: PingFang SC;
		      font-weight: 500;
		      line-height: 20px;
		     color: #000000;">门店名称</span></div>
		  			 <div style="font-size: 18px;
		  			 font-family: PingFang SC;
		  			 font-weight: 500;
		  			 position: absolute;
		  			 top: 60px;
		  			 line-height: 25px;
		  			 color: #7B7B7B;">2021-5-10 18:00</div>
		  			   </div>
		  			   
		  </div>
	</div>
	
</template>

<script>
  export default {
    data() {
      return {
		   formInline: {
		            user: '',
		            region: ''
		          },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      };
    },
	 methods: {
	      onSubmit() {
	        console.log('submit!');
	      }
	    }
  };
</script>

<style scoped="scoped">
	/deep/.el-input__inner{
		height: 33px;
		margin-top: 3px;
	}
	/deep/.el-range-editor.el-input__inner{
		height: 33px;
		margin-top: 3px;
	}
	.demo-form-inline{

	}
	.demo-form-inline>.el-form-item{
		
		
	}
	.block{
		position: relative;
		width: 85%;
		border: 1px solid #CCCCCC;
		margin: 2% auto 0 2%;
		padding: 10px;
	}
	.top{
		margin-top: 2%;
		position: relative;
	}
	.query{
		width: 177px;
		height: 42px;
		background: #004DD5;
		position: absolute;
		right: 10px;
		bottom: 10px;
	}
	.del{
		width: 89px;
		height: 21px;
		background: #FF0000;
		border-radius: 7px;
		position: absolute;
		right: 0;
		margin-right: 10px;
		line-height: 3px;
	}
	.center{
		height: 160px;
	}
	.anniu{
		display: inline-block;
		width: 50px;
		height: 27px;
		background: #004EFF;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 28px;
		color: #FFFFFF;
		border-radius: 5px;
		text-align: center;
	}
	.dian{
		display: inline-block;
		width: 33px;
		height: 33px;
		background: #000000;
		border: 1px solid #000000;
		border-radius: 50%;
		position: absolute;
	}
	.one{
		top: 6px;
		margin-left: 3px;
	}
	.tow{
		right: 60px;
	}
	.text{
		margin:19px 0 0 78px;
		
	}
	textarea{
		width: 708px;
		border: none;
	}
	.botton_right{
		width: 180px;
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 0;
		top: 45%;
	}
</style>
